<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>踏云产品实时报表</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', path='css/report.css') }}"
    />
  </head>
  <body>

    <!-- 数据表格 -->
    <div class="table-container">
      <table>
        <thead>
          <!-- 第一级表头：区域划分 -->
          <tr class="header-group">
            <th rowspan="2" class="product-header">产品</th>
            <th colspan="6" class="group-current">实时状态</th>
            <th colspan="5" class="group-recent">近7日</th>
          </tr>
          <!-- 第二级表头：具体指标 -->
          <tr class="header-detail">
            <th class="current-data">流水</th>
            <th class="current-data">今日预估</th>
            <th class="current-data">ARPU</th>
            <th class="current-data">付费率</th>
            <th class="current-data">新增账户</th>
            <th class="current-data">昨日流水</th>
            <th class="recent-data separator-column">日均流水</th>
            <th class="recent-data">ARPU</th>
            <th class="recent-data">付费率</th>
            <th class="recent-data">客单价</th>
            <th class="recent-data">日均新增用户</th>
          </tr>
        </thead>
        <tbody>
          {% for product in products_data %}
          <tr>
            <td class="product-name">{{ product.product_name }}</td>
            <td>{{ product.order_sum }}</td>
            <td>
              {{ product.predicted_sales }} {% if
              product.recent_7days_avg_revenue > 0 %} {% set
              predicted_vs_7days_change = ((product.predicted_sales -
              product.recent_7days_avg_revenue) /
              product.recent_7days_avg_revenue * 100)|round(2) %}
              <span
                class="percent {% if predicted_vs_7days_change > 0 %}up{% else %}down{% endif %}"
              >
                ({% if predicted_vs_7days_change > 0 %}+{% endif %}{{
                predicted_vs_7days_change }}%)
              </span>
              {% endif %}
            </td>
            <td class="highlight">
              {{ product.arpu }} {% if product.recent_7days_arpu > 0 %} {% set
              arpu_vs_7days_change = ((product.arpu - product.recent_7days_arpu)
              / product.recent_7days_arpu * 100)|round(2) %}
              <span
                class="percent {% if arpu_vs_7days_change > 0 %}up{% else %}down{% endif %}"
              >
                ({% if arpu_vs_7days_change > 0 %}+{% endif %}{{
                arpu_vs_7days_change }}%)
              </span>
              {% endif %}
            </td>
            <td class="highlight">
              {{ ((product.order_count / product.reg_count * 100) if
              product.reg_count > 0 else 0)|round(2) }}%
            </td>
            <td>{{ product.reg_count }}</td>
            <td>{{ product.last_order_sum }}</td>
            <td class="seven-days-data recent-data separator-column">
              {{ product.recent_7days_avg_revenue }}
            </td>
            <td class="seven-days-data recent-data">
              {{ product.recent_7days_arpu }}
            </td>
            <td class="seven-days-data recent-data">
              {{ product.recent_7days_payment_rate }}%
            </td>
            <td class="seven-days-data recent-data">
              {{ product.recent_7days_avg_order_value }}
            </td>
            <td class="seven-days-data recent-data">
              {{ product.recent_7days_avg_new_users }}
            </td>
          </tr>
          {% endfor %}

          <!-- 合计行 -->
          <tr class="total-row">
            <td class="total-label">合计</td>
            {% set total_order_sum = products_data|sum(attribute='order_sum') %}
            {% set total_reg_count = products_data|sum(attribute='reg_count') %}
            {% set total_order_count =
            products_data|sum(attribute='order_count') %} {% set
            total_7days_orders =
            products_data|sum(attribute='recent_7days_total_orders') %} {% set
            total_7days_users =
            products_data|sum(attribute='recent_7days_total_users') %} {% set
            total_7days_payment_rate = ((total_7days_orders / total_7days_users
            * 100) if total_7days_users > 0 else 0)|round(2) %} {% set
            total_7days_revenue =
            products_data|sum(attribute='recent_7days_total_revenue') %} {% set
            total_7days_arpu = ((total_7days_revenue / total_7days_users) if
            total_7days_users > 0 else 0)|round(2) %} {% set
            total_7days_avg_revenue =
            products_data|sum(attribute='recent_7days_avg_revenue')|round(2) %}
            {% set total_7days_avg_order_value = ((total_7days_revenue /
            total_7days_orders) if total_7days_orders > 0 else 0)|round(2) %}

            <td>{{ total_order_sum|round(2) }}</td>
            <td>
              {{ products_data|sum(attribute='predicted_sales')|round(2) }} {%
              set total_predicted =
              products_data|sum(attribute='predicted_sales') %} {% if
              total_7days_avg_revenue > 0 %} {% set
              total_predicted_vs_7days_change = ((total_predicted -
              total_7days_avg_revenue) / total_7days_avg_revenue * 100)|round(2)
              %}
              <span
                class="percent {% if total_predicted_vs_7days_change > 0 %}up{% else %}down{% endif %}"
              >
                ({% if total_predicted_vs_7days_change > 0 %}+{% endif %}{{
                total_predicted_vs_7days_change }}%)
              </span>
              {% endif %}
            </td>
            <td class="highlight">
              {{ (total_order_sum / total_reg_count)|round(2) if total_reg_count
              > 0 else 0 }} {% set total_current_arpu = (total_order_sum /
              total_reg_count)|round(2) if total_reg_count > 0 else 0 %} {% if
              total_7days_arpu > 0 %} {% set total_arpu_vs_7days_change =
              ((total_current_arpu - total_7days_arpu) / total_7days_arpu *
              100)|round(2) %}
              <span
                class="percent {% if total_arpu_vs_7days_change > 0 %}up{% else %}down{% endif %}"
              >
                ({% if total_arpu_vs_7days_change > 0 %}+{% endif %}{{
                total_arpu_vs_7days_change }}%)
              </span>
              {% endif %}
            </td>
            <td class="highlight">
              {{ ((total_order_count / total_reg_count * 100) if total_reg_count
              > 0 else 0)|round(2) }}%
            </td>
            <td>{{ total_reg_count }}</td>
            <td>{{ total_yesterday_sales }}</td>
            <td
              class="seven-days-data total-seven-days total-recent separator-column"
            >
              {{ total_7days_avg_revenue }}
            </td>
            <td class="seven-days-data total-seven-days total-recent">
              {{ total_7days_arpu }}
            </td>
            <td class="seven-days-data total-seven-days total-recent">
              {{ total_7days_payment_rate }}%
            </td>
            <td class="seven-days-data total-seven-days total-recent">
              {{ total_7days_avg_order_value }}
            </td>
            <td class="seven-days-data total-seven-days total-recent">
              {{
              products_data|sum(attribute='recent_7days_avg_new_users')|round(2)
              }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 实时趋势图卡片 -->
    <div class="card chart-card">
      <canvas id="trendChart"></canvas>
    </div>

    <!-- 历史趋势图卡片 -->
    <div class="card historical-card">
      <div class="card-header">
        <h3 class="card-title">历史流水</h3>
        <select id="historyPeriod" class="period-selector">
          <option value="7">近7天</option>
          <option value="15">近15天</option>
          <option value="30" selected>近30天</option>
          <option value="60">近60天</option>
        </select>
      </div>
      <canvas id="historicalChart"></canvas>
    </div>

    <!-- 版权信息 -->
    <footer class="footer">
      <p>&copy; 2024 踏云科技 | 实时数据分析平台</p>
      <p>Powered by FastAPI & Chart.js</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.1/dist/chartjs-adapter-moment.min.js"></script>
    <script>
      // 传递后端数据到前端
      const predictionPoints = {{ prediction_points|tojson }};
      const yesterdayPoints = {{ yesterday_points|tojson }};
      const regressionPoints = {{ regression_points|tojson if regression_points else '[]' }};
      const targetValue = {{ config.CHART_SETTINGS.TARGET_VALUE }};
      const warningValue = {{ total_7days_avg_revenue }};
      const chartBounds = {{ chart_bounds|tojson }};
      const historicalChartData = {{ historical_chart_data|tojson }};
    </script>
    <script src="{{ url_for('static', path='js/report.js') }}"></script>
    <script src="{{ url_for('static', path='js/historical-chart.js') }}"></script>
  </body>
</html>
